<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button-group>
					<el-button icon="el-icon-position" type="success" :disabled="!this.selection.length" @click="issue"
						>下发</el-button
					>
				</el-button-group>
				<el-button-group>
					<el-button
						icon="el-icon-video-pause"
						type="danger"
						:disabled="!this.selection.length"
						@click="pause"
						>暂停</el-button
					>
					<el-button
						icon="el-icon-video-play"
						type="warning"
						:disabled="!this.selection.length"
						@click="unPause"
						>取消暂停</el-button
					>
				</el-button-group>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model.trim="reqParams.key" clearable placeholder="请输入工单号查询" />
					<el-button icon="el-icon-search" type="primary" @click="search" />
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:api-obj="apiObj"
				:params="reqParams"
				row-key="id"
				hideContextMenu
				stripe
				@selection-change="selectionChange">
				<!-- 固定列-选择列 -->
				<el-table-column fixed type="selection" align="center" width="40" />
				<el-table-column prop="wo" label="工单单号" align="center" width="140" />
				<el-table-column prop="productCode" label="产品代码" align="center" width="140" />
				<el-table-column prop="product.itemName" label="产品名称" align="center" width="140" />
				<el-table-column prop="status" label="单据状态" align="center" width="80">
					<template #default="scope">
						<el-tag :type="statusType(scope.row.status)">{{ scope.row.statusDesc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="totalQty" label="总数量" align="center" width="80" />
				<el-table-column prop="onlineQty" label="上线数量" align="center" width="80" />
				<el-table-column prop="completedQty" label="完工数量" align="center" width="80" />
				<el-table-column prop="qualifiedQty" label="合格数量" align="center" width="80" />
				<el-table-column prop="unqualifiedQty" label="不合格数量" align="center" width="100" />
				<el-table-column prop="scrapQty" label="报废数量" align="center" width="80" />
				<el-table-column prop="actualStartTime" label="开始时间" align="center" width="140" />
				<el-table-column prop="actualEndTime" label="结束时间" align="center" />
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			apiObj: this.$API.prodsequence.page,
			reqParams: {
				key: "",
			},
			selection: [],
		};
	},
	methods: {
		search() {
			this.$refs.table.upData(this.reqParams);
		},
		statusType(status) {
			switch (status) {
				case 10: return 'info';
				case 20: return 'info';
				case 30: return '';
				case 40: return 'success';
				case 50: return 'warning';
				case 60: return 'danger';
				default:
				return 'info';
			}
		},
		rowSelectable(row, index) {
			console.log(index);
			return row.status === 20; // 只能选择状态为 "20（已排产）" 项。
		},
		selectionChange(selection) {
			this.selection = selection;
		},
		async issue() {
			const resp = await this.$API.prodsequence.issue.put(this.selection);
			if (resp.code == 200) {
				this.$refs.table.refresh();
				this.$message.success(`下发成功, 共 ${resp.data} 项`);
			} else {
				this.$alert(resp.message, "提示", { type: "error" });
			}
		},
		async pause() {
			const resp = await this.$API.prodsequence.pause.put(this.selection);
			if (resp.code == 200) {
				this.$refs.table.refresh();
				this.$message.success(`暂停成功, 共 ${resp.data} 项`);
			} else {
				this.$alert(resp.message, "提示", { type: "error" });
			}
		},
		async unPause() {
			const resp = await this.$API.prodsequence.unPause.put(this.selection);
			if (resp.code == 200) {
				this.$refs.table.refresh();
				this.$message.success(`暂停取消成功, 共 ${resp.data} 项`);
			} else {
				this.$alert(resp.message, "提示", { type: "error" });
			}
		},
	},
};
</script>
